<!DOCTYPE html>
<html>
<head>
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/css/public.css" media="all" />
    <link rel="stylesheet" href="/css/special.css" media="all" />
    <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/pages/customer.js"></script>
    <script type="text/javascript" src="/js/pages/consumer/formData.js"></script>
    <style type="text/css">
        #invoiceBigDiv{
            position: relative;
        }
        #invoiceBigDiv .small_pic{
            position: relative;
        }
        #invoiceBigDiv .float_layer{
            width: 50px;
            height: 50px;
            border:1px solid #000;
            background: #fff;
            filter: alpha(opacity:30);
            opacity: 0.3;
            position: absolute;
            top: 0px;
            left: 0px;
            display: none;
        }
        #invoiceBigDiv .mark{
            width: 100%;
            height:100%;
            position: absolute;
            z-index: 2;
            left: 0px;
            top: 0px;
            background: red;
            filter: alpha(opacity:0);
            opacity: 0;
        }
        #big_pic{
            position: absolute;
            top: -1px;
            width: 300px;
            height: 300px;
            overflow: hidden;
            border: 2px solid #ccc;
            display: none;
            z-index: 1000;
        }
        #big_pic img{
            position: absolute;
            top: 0px;
            left: 0px;

        }
    </style>
    <script type="text/javascript">
        /*
        function getByClass(oParent, sClass) {
            var aEle = oParent.getElementsByTagName('*');
            var aTmp = [];
            var i = 0;
            for( i=0; i<aEle.length; i++){
                if( aEle[i].className == sClass)
                {
                    aTmp.push( aEle[i]);
                }
            }
            return aTmp;
        }

        window.onload = function ()
        {
            var oDiv = document.getElementById( 'invoiceBigDiv');
            var oMark = getByClass( oDiv, 'mark')[0];
            var oFloat = getByClass( oDiv,'float_layer')[0];
            var oBig = document.getElementById( 'big_pic');
            var oSmall = getByClass( oDiv,'small_pic')[0];
            var oImg = oBig.getElementsByTagName( 'img')[0];
            oMark.onmouseover = function() {
                oFloat.style.display = 'block';
                oBig.style.display = 'block';
            };
            oMark.onmouseout = function(){
                oFloat.style.display = 'none';
                oBig.style.display = 'none';
            };
            oMark.onmousemove = function( ev){
                var oEvent = ev || event;
                var l = oEvent.clientX - oDiv.offsetLeft - oSmall.offsetLeft - oFloat.offsetWidth/2;
                var t = oEvent.clientY - oDiv.offsetTop - oSmall.offsetTop - oFloat.offsetHeight/2;

                if( l < -5) {
                    l = -5;
                }else if ( l > (oMark.offsetWidth - oFloat.offsetWidth + 5)){
                    l = oMark.offsetWidth - oFloat.offsetWidth + 5;
                }
                if( t < -5) {
                    t = -5;
                } else if( t > (oMark.offsetHeight - oFloat.offsetHeight + 5)){
                    t = oMark.offsetHeight - oFloat.offsetHeight + 5;
                }

                oFloat.style.left = l + 'px';
                oFloat.style.top = t + 'px';
                var tempX = l/( oMark.offsetWidth - oFloat.offsetWidth);
                var tempY = t/( oMark.offsetHeight - oFloat.offsetHeight);
                document.title = tempX;
                oImg.style.left = -tempX * ( oImg.offsetWidth - oBig.offsetWidth) + 'px';
                oImg.style.top = -tempY * ( oImg.offsetHeight - oBig.offsetHeight) + 'px';
            }
        };*/
    </script>
</head>
<body class="childrenBody">
<form class="layui-form layui-row layui-col-space10">
	<div class="layui-col-md12 layui-col-xs12">
		<div class="layui-row layui-col-space10">
            <div class="layui-col-xs7">
                <fieldset class="layui-elem-field">

                    <div class="layui-field-box">
                        <div class="layui-form-item">
                            <div class="layui-input-block invoiceDiv" style="text-align: right;">
                                <input type="hidden" name="invoiceImg">
                                <input type="hidden" name="invoice">
                                <input type="hidden" name="facturePerdu" value="0">
                                <button type="button" class="layui-btn layui-btn-normal invoiceBtn" style="display: inline">Ajouter la facture</button>
                                <button type="button" class="layui-btn facturePerdu">Facture perdu</button>
                                <button type="button" class="layui-btn layui-btn-danger deleteInvoice"><i class="layui-icon"></i></button>
                            </div>
                            <div id="invoiceBigDiv" style="width: 450px;margin-top: 10px;">
                                <div class="small_pic" id="invoiceImgDiv" style=" width: 100%;min-height: 600px;">
                                    <span class="mark"></span>
                                    <span class="float_layer"></span>

                                </div>
                                <div id="button_div">

                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
			<div class="layui-col-xs5">
                <div id="big_pic">
                    <img src="" id="pdfImg_big"/>
                </div>
                <!--  hidden -->
                <input type="hidden" class="layui-input id" lay-verify="id" name="id">
                <!--  hidden -->
                <fieldset class="layui-elem-field">
                    <legend>Détails de la facture</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item magt3">
                            <label class="layui-form-label width_120">Date de dépense</label>
                            <div class="layui-input-block margin-left_150">
                                <input type="text" class="layui-input" name="dateDeDepense" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item magt3">
                            <label class="layui-form-label width_120">Fournisseur</label>
                            <div class="layui-input-block margin-left_150">
                                <input type="text" class="layui-input" name="fournisseur" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item magt3">
                            <label class="layui-form-label width_120">Montant TTC</label>
                            <div class="layui-input-block margin-left_150">
                                <input type="text" class="layui-input" name="montantTTC" readonly>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset class="layui-elem-field">
                    <legend>Déclaration de la TVA</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item magt3">
                            <label class="layui-form-label width_120">catégorie</label>
                            <div class="layui-input-block margin-left_150" style="width: 150px;">
                                <select name="customHouse" lay-verify="customHouse">

                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item magt3">
                            <label class="layui-form-label width_120">TVA%</label>
                            <div class="layui-input-block margin-left_150">
                                <input type="radio" name="invoiceRate" id="invoiceRateRadioOne" lay-filter="invoiceRateRadio" value="20%" title="20%">
                                <input type="radio" name="invoiceRate" id="invoiceRateRadioTwo" lay-filter="invoiceRateRadio" value="0" title="Sans TVA">
                                <input type="radio" name="invoiceRate" id="invoiceRateRadioThree" lay-filter="invoiceRateRadio" value="other" title="Autre TVA">
                            </div>
                        </div>
                        <div class="layui-form-item magt3">
                            <label class="layui-form-label width_120">TVA</label>
                            <div class="layui-input-block margin-left_150">
                                <input type="text" class="layui-input" name="invoiceMoney" value="0" required>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <div id="submitDiv">
                    <hr class="layui-bg-gray" />
                    <div class="layui-right submitDiv">
                        <a class="layui-btn layui-btn-sm" lay-filter="uploadInvoiceBtn" lay-submit><i class="layui-icon layui-icon-ok-circle">Enregistrer</i></a>
                    </div>
                </div>
			</div>
		</div>
	</div>
</form>
</body>
</html>
